<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>超级简历-注册</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../layui/layui.js"></script>

    <style>
        body {
            background: #F5F5F7;
        }

        .main {
            background: #FFFFFF;
            width: 480px;
            padding-top: 32px;
            background: #FFFFFF;
            color: #404040;
            min-height: 640px;
            margin-top: 50px;
            margin-bottom: 30px;
            box-shadow: -2px 0px 5px 1px #E9E9EB, 0px -2px 5px 1px #E9E9EB, 2px 0px 5px 1px #E9E9EB, 0px 2px 5px 1px #E9E9EB;
        }

        .zhuce {
            font-size: 14px;
            height: 50px;
            text-align: center;
            padding-top: 35px;
            font-weight: 600;
            display: inline-block;
        }

        .zhuce a {
            border-bottom: 3px solid red;
        }

        .denglu {
            height: 50px;
            text-align: center;
            padding-top: 35px;
            font-weight: 600;
            display: inline-block;
        }

        label {
            color: #464a4c;
            text-align: center;
            background-color: #DEDFE1;
            border: 1px solid #DEDFE1;
            width: 30px;

        }

        .yanzhengshouji {
            width: 70%;
            margin: 0 auto;
            border-color: #DEDFE1;
        }

        .huoquyanzhengma {
            width: 66%;
            margin: 0 auto;
            border-color: #DEDFE1;
        }

        .yanzhengma {
            border-color: #DEDFE1;
            border: 1px solid #DEDFE1;
            width: 24%;
            float: right;
        }

        .yanzhengma a {
            color: #50A4FF;
        }

        .anniu {
            width: 67%;
            margin-left: 15%;
        }

        .anniu a {
            color: #FFFFFF;
            background: #ff4f4c;
            font-weight: 600;
            border: none;
        }

        .yijiandenglu {
            margin-top: 30px;
            text-align: center;
            margin-top: 90px;
            width: 66%;
            margin-left: 17%
        }

        .yijiandenglu a {
            color: #9B9B9B;
        }

        .dibu p {
            text-align: center;
            color: #9B9B9B;
            font-size: 14px;
        }

        .footer .footerL {
            width: 48%;
            text-align: center;
            float: left;
        }

        .footer {
            width: 100%;
            /* border: 1px solid red; */
        }

        .footer-fast {
            width: 66.66%;
            margin: 0 auto;
            padding-top: 24px;
            margin-bottom: 50px;
            /* border: 1px solid red; */
        }

        .footerL {
            width: 50%;
            text-align: center;
            float: left;
            /* border: 1px solid red; */
        }

        .footerL a i {
            border: 1px solid #dedfe1;
            width: 60px;
            height: 60px;
            line-height: 60px;
            border-radius: 60px;
            font-size: 24px;
            display: block;

        }

        .footerR {
            width: 48%;
            text-align: center;
            float: right;
            /* border:1px solid red; */
        }

        .footerL a {
            color: #9c9c9c;
        }

        .footerR a {
            color: #9c9c9c;
        }

        .footer-login i:hover {
            color: #29C872;
        }

        .footer-loginR i:hover {
            color: rgb(21, 92, 199);
        }

        .layui-tab-title li {
            font-weight: 600;
        }

        .layui-input {
            width: 105%;
        }

        .layui-tab-title li {
            margin-left: 75px;
        }

        .layui-tab-brief > .layui-tab-title .layui-this {
            color: red;
        }

        .layui-tab-brief > .layui-tab-more li.layui-this:after, .layui-tab-brief > .layui-tab-title .layui-this:after {
            border-bottom: 1px solid red;
        }
    </style>
</head>
<body>

<div class="main layui-fluid" style="text-align:center;">
    <!--照片-->
    <div class="header-logo layui-col-md12" style="text-align: center;">
        <a style="height:55px;display: block" href="../chaojijianli.html"><img src="../images/logo.png" alt="" style="width: 180px;"></a>
<!--        <img src="../images/logo.png" alt="" style="width: 180px;">-->
    </div>


    <!--选项卡-->
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title"
            style="height:40px;width:100%;margin-left:-25px;text-align:center;margin-top:80px;border:none">
            <li class="layui-this">注册</li>
            <li>登录</li>
        </ul>

        <div class="layui-tab-content" style="height: 100px;margin-top:20px;">
            <div class="layui-tab-item layui-show">

                <div class="layui-tab-content" style="height: 500px;">
                    <div class="yanzhengshouji">
                        <div class=" layui-form-item">
                            <label style="width: 18px;" class="layui-form-label " style="">+86</label>
                            <div style="width: 230px" class="shouji layui-input-inline">
                                <input type="text" name="username" lay-verify="required" placeholder="手机"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>

                    <div class="huoquyanzhengma layui-form-item" style="margin-top: 22px;">
                        <div class="layui-input-inline" style="width:60%;">
                            <input type="password" name="password" required lay-verify="required" placeholder="验证码"
                                   autocomplete="off" class="layui-input" style="width:200px;margin-left: -11px">
                        </div>

                        <div>
                            <button class="layui-btn layui-btn-primary" style="width: 100px;">
                                <a class="" style="color:#77C5FF">获取验证码</a>
                            </button>
                        </div>
                    </div>


                    <div>
                        <button class="anniu layui-btn layui-btn-danger" style="margin-top: 20px "><a>免费注册</a></button>
                    </div>

                    <div class="layui-fluid" style="margin-top:13px;">
                        <div style="width: 80%;margin-left: 10%">
                            <div class="layui-col-md12 layui-col-xs12 ">
                                <div class="layui-row">
                                    <div class="layui-col-md6 layui-col-xs6">
                                        <button class="layui-btn layui-btn-primary"
                                                style="border: 0;float: left;margin-left: 10px; color: #9B9B9B;">邮箱注册
                                        </button>
                                    </div>
                                    <div class="layui-col-md6 layui-col-xs6">
                                        <button class="layui-btn layui-btn-primary"
                                                style="border: 0;float:right; color: #9B9B9B;">注册遇到问题？
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="yijiandenglu">
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend><a>一键快捷注册</a></legend>
                        </fieldset>

                    </div>

<!--                    底部-->
                    <div class="footer">
                        <div class="footer-fast">
                            <div class="footerL">
                                <a class="footer-login" href="">
                                    <i class="layui-icon layui-icon-login-wechat" style="border: 1px solid #dedfe1; width: 60px;
                                                            height: 60px;
                                                            line-height: 60px;
                                                            border-radius: 60px;
                                                            font-size: 30px;
                                                            display: block;margin:0 auto;">
                                        <p style="font-size: 15px;">
                                        微信登录
                                        </p>
                                    </i>
                                </a>
                            </div>
                            <div class="footerR">
                                <a class="footer-loginR" href="">
                                    <i class="layui-icon layui-icon-login-qq" style="border: 1px solid #dedfe1; width: 60px;
                                                            height: 60px;
                                                            line-height: 60px;
                                                            border-radius: 60px;
                                                            font-size: 30px; 
                                                            display: block;margin: 0 auto;">
                                        <p style="font-size: 15px;display: block">QQ登录</p>
                                    </i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <!-- </div> -->

                </div>
            </div>
            <div class="layui-tab-item">

<!--            注册/登录input-->
                <div class="layui-tab-content" style="height: 100px;margin-top: -10px;">
                    <div class="layui-tab-item layui-show">

                        <div class="layui-tab-content" style="height: 500px;">
                            <div class="yanzhengshouji">
                                <div class=" layui-form-item">
                                    <label style="width: 18px;" class="layui-form-label " style="">+86</label>
                                    <div style="width: 230px" class="shouji layui-input-inline">
                                        <input type="text" name="username" lay-verify="required" placeholder="手机"
                                               autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>
                            <div class="huoquyanzhengma layui-form-item" style="margin-top: 22px;">
                                <div class="layui-input-inline" style="width:60%;">
                                    <input type="password" name="password" required lay-verify="required"
                                           placeholder="验证码" autocomplete="off" class="layui-input"
                                           style="width:200px;margin-left: -11px">
                                </div>

                                <div>
                                    <button class="layui-btn layui-btn-primary" style="width: 100px;"><a class=""
                                                                                                         style="color:#77C5FF;">获取验证码</a>
                                    </button>
                                </div>
                            </div>

                            <div>
                                <button class="anniu layui-btn layui-btn-danger" style="margin-top: 20px; "><a>登录</a>
                                </button>
                            </div>

                            <div class="layui-fluid" style="margin-top:13px;">
                                <div style="width: 80%;margin-left: 10%">
                                    <div class="layui-col-md12 layui-col-xs12 ">
                                        <div class="layui-row">
                                            <div class="layui-col-md6 layui-col-xs6">
                                                <button class="layui-btn layui-btn-primary"
                                                        style="border: 0;float: left;margin-left: 10px; color: #9B9B9B;">
                                                    邮箱密码登录
                                                </button>
                                            </div>
                                            <div class="layui-col-md6 layui-col-xs6">
                                                <button class="layui-btn layui-btn-primary"
                                                        style="border: 0;float:right; color: #9B9B9B;">登录遇到问题？
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="yijiandenglu">
                                <fieldset class="layui-elem-field layui-field-title">
                                    <legend><a>一键快捷登录</a></legend>
                                </fieldset>

                            </div>

                            <div class="footer">
                                <div class="footer-fast">
                                    <div class="footerL">
                                        <a class="footer-login" href="">
                                            <i class="layui-icon layui-icon-login-wechat" style="border: 1px solid #dedfe1; width: 60px;
                                                                       height: 60px;
                                                                       line-height: 60px;
                                                                       border-radius: 60px;
                                                                       font-size: 30px;
                                                                       display: block;margin:0 auto;"><p
                                                    style="font-size: 15px;">微信登录</p></i>
                                        </a>
                                    </div>
                                    <div class="footerR">
                                        <a class="footer-loginR" href="">
                                            <i class="layui-icon layui-icon-login-qq" style="border: 1px solid #dedfe1; width: 60px;
                                                                       height: 60px;
                                                                       line-height: 60px;
                                                                       border-radius: 60px;
                                                                       font-size: 30px; 
                                                                       display: block;margin: 0 auto;"><p
                                                    style="font-size: 15px;display: block">QQ登录</p></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <!-- </div> -->

                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
</div>


<script>
    layui.use('element', function () {
        var $ = layui.jquery
            , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

        //触发事件
        var active = {
            tabAdd: function () {
                //新增一个Tab项
                element.tabAdd('demo', {
                    title: '新选项' + (Math.random() * 1000 | 0) //用于演示
                    , content: '内容' + (Math.random() * 1000 | 0)
                    , id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                })
            }
            , tabDelete: function (othis) {
                //删除指定Tab项
                element.tabDelete('demo', '44'); //删除：“商品管理”


                othis.addClass('layui-btn-disabled');
            }
            , tabChange: function () {
                //切换到指定Tab项
                element.tabChange('demo', '22'); //切换到：用户管理
            }
        };

        $('.site-demo-active').on('click', function () {
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });

        //Hash地址的定位
        var layid = location.hash.replace(/^#test=/, '');
        element.tabChange('test', layid);

        element.on('tab(test)', function (elem) {
            location.hash = 'test=' + $(this).attr('lay-id');
        });

    });
</script>

</body>
</html>











